<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素内容操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 01_元素内容操作：操作元素和元素内容的方式 
		.html()     无参---功能：获取匹配元素集合中第一个元素
		            有参---功能：获取匹配元素集合中所有元素并替换
			特点：添加元素和内容
		.val()      无参---功能：针对表单元素：input，select...
		                       获取第一个表单元素的值【velue】
		            有参---功能：针对表单元素：input，select...
					           设置表单元素的值，input直接设置
							                   select不能直接设置，设置原有value值
			特点：设置表单元素+内容，下拉列表只能添加存在的value值
		.text()     无参---获取匹配元素集合中所有元素的文本内容
		            有参---设置获取匹配元素集合中所有元素的文本内容做替换
			特点：添加内容
		-->
	</head>
	<body>
		<h1>html()函数的使用</h1>
		<button>html()函数 有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		
		<h1>val()函数的使用</h1>
		<button class="btn1">val()函数[input]无参</button>
		<input type="text" value="文本框真实数据1" />
		<input type="text" placeholder="文本框提示2" />
		<!-- html 按钮.btn2  select>option*3
		     jq:  点击按钮，显示第一个表单元素的值-->
		<br />
		<button class="btn2">val()函数[select]无参</button>
		<button class="btn3">val()函数[select]有参</button>
		<select>
			<!-- option包裹用户显示数据，option属性value真实的数据 -->
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用:包裹内容：文本</h1>
		<button class="btn4">text()函数 有参</button>
		<button class="btn5">text()函数 无参</button>
		<p>Lorem4</p>
		<p>Lorem5</p>
		<p>Lorem6</p>
		<script>
			// 抓到无参按钮：点击，打印p的text值
			$(".btn4").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
			//抓到有参按钮：点击，改变p中文本内容：改变效果
			$(".btn5").click(function(){
				$("p").text("改变效果");
			});
			
			//$(".btn3").click(function(){
				/* 下拉列表  抓select元素 */
				//var vals=$("select").val("rem1");
				//抓取打印select的js对象，默认字符串形式表示[object Object]
				//抓取打印select的js对象，调用对象tostring()方法，如果没有重写会[object Object]
				//设置第一个option的value值
				//$("select").val("rem3");
				//var vals=$("select").val();
				//alert("val() 函数针对下拉列表："+vals);
			//});
			
			
			
			//$(".btn2").click(function(){
				/* 下拉列表  抓select元素 */
				//var vals=$("select").val();
				//alert("val() 函数针对下拉列表："+vals);
			//});
			
			
			
			//$(".btn1").click(function(){
				/*变量名不允许使用关键字   js中关键字 for in 遍历数组*/
			//	var ins=$("input").val();
			//	alert("val()针对input元素：无参"+ins);
			//});
			
			
			
			// 按钮，点击按钮，实现span内容 改成lorem  lorem
			// $("button").click(function(){
			// 	$("span").html("<h1>lorem</h1>");
			// });
			/* 变量    js变量--jq
			 int i=1；  Java写法 强类型语言
			 var i=数值,元素； JavaScript 弱类型语言
			*/
		   // var html=$("span").html();
		   // alert("html()函数的无参值："+html)
		</script>
	</body>
</html>